import React, { useEffect, useState } from 'react'
import { useParams, useLocation, useNavigate, } from 'react-router-dom'
import { Toast, NavBar } from 'react-vant';
import { CartO, ChatO } from '@react-vant/icons';
import { Image, ActionBar, ImagePreview, Cell } from 'react-vant';
import { useSelector, useDispatch } from 'react-redux'
import { ALLSTATE, ADDCCARLIST } from '../../types/store.d'
import { delimiter } from 'path';

interface MYPROPS {

}

interface DETILEDATATYPE {
    user?: string,
    id?: string,
    city?: string,
    img?: string,
    paig?: string
}

export default function Detile() {
    const location = useLocation()
    const params = useParams()
    const navigate = useNavigate()
    const dispatch = useDispatch()

    const [datatileData, setdatatileData] = useState<DETILEDATATYPE>({})

    useEffect(() => {
        console.log(location);
        setdatatileData(location.state as DETILEDATATYPE)  //断言

    }, [])

    useEffect(() => {
        console.log(datatileData, 'datatileData');

    }, [datatileData])

    //购物车长度  设置徽标
    const carListNum = useSelector((state: ALLSTATE) => {
        return state.carList.length
    })

    const images = [
        datatileData.img as string   // 断言 定义约束类型

    ];

    const handleClick = () => {
        ImagePreview.open({
            images,
            onChange: (index) => console.log(`当前展示第${index + 1}张`),
        })
    }

    //点击添加到购物车
    const handleAddCarList = () => {
        console.log('1111');

        dispatch({  //派发给仓库
            type: ADDCCARLIST,
            payload: datatileData
        })

        //定时器
        const timer = setTimeout(() => {
            navigate('/home/car')  //跳转购物车页面
            clearTimeout(timer)
        }, 2000)

    }

    return (
        <div>
            <NavBar
                title="标题"
                leftText='返回'
                onClickLeft={() => navigate(-1)}
            />

            <div className="demo-image">
                <Image src={datatileData.img} onClick={() => handleClick()} />
                <h3>{datatileData.user}</h3>
                <p>{datatileData.id}</p>
                <p>{datatileData.city}</p>
                <p>{datatileData.paig}</p>
            </div>


            <div className='demo-action-bar'>
                <ActionBar>
                    <ActionBar.Icon icon={<ChatO />} text="客服" />
                    <ActionBar.Icon icon={<CartO />}  badge={{ content: carListNum }} text="购物车" />
                    <ActionBar.Button color="#be99ff" onClick={() => handleAddCarList()} type="warning" text="加入购物车" />
                    <ActionBar.Button color="#7232dd" type="danger" text="立即购买" />
                </ActionBar>
            </div>



        </div>


    )
}
